/*
 * @Author: xuchao 
 * @Date: 2018-06-05 14:49:45 
 * @Last Modified by: xuchao
 * @Last Modified time: 2018-06-13 12:51:54
 * 
 * @comments: 首页顶部轮播组件
 */
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Slider from "react-slick";
import './style.less';

export default class Carousel extends Component {
    constructor(props){
        super(props)
        this.state = {
            settings: {
                dots: true,
                infinite: true,
                speed: 500,
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true
            }
        } 
    }

    render(){
        return (
            <Slider {...this.state.settings}>
                <div>
                    <Link to="/supermarket">
                        <img src={require('@/static/images/banner1.jpg')} alt=""/>
                    </Link>
                </div>
                <div>
                    <img src={require('@/static/images/banner5.jpg')} alt=""/>
                </div>
                <div>
                    <img src={require('@/static/images/banner8.jpg')} alt=""/>
                </div>
                <div>
                    <img src={require('@/static/images/banner9.jpg')} alt=""/>
                </div>
            </Slider>
        )
    }
}
